<template>
  <app-card>
    <template #header>
      <el-input v-model="listParams.openId" placeholder="openId" autocomplete="off"/>
      <el-input v-model="listParams.ip" placeholder="登录IP" autocomplete="off"/>
      <el-input v-model="listParams.brand" placeholder="设备品牌" autocomplete="off"/>

      <el-button type="primary" icon="search" @click="loadList">查询
      </el-button
      >
      <el-button @click="reset" icon="Refresh">重置</el-button>
    </template>
    <el-table
        :data="list"
        v-loading="listLoading"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
    >
      <el-table-column align="center" prop="ip" label="登录IP"/>
      <el-table-column align="center" prop="ipAddr" label="登录地点"/>
      <el-table-column align="center" prop="openId" label="openId"/>
      <el-table-column align="center" prop="brand" label="设备品牌"/>
      <el-table-column align="center" prop="model" label="设备型号"/>
      <el-table-column align="center" prop="version" label="微信版本号"/>
      <el-table-column align="center" prop="system" label="操作系统及版本"/>
      <el-table-column align="center" prop="platform" label="客户端平台"/>
      <el-table-column align="center" prop="createTime" sortable="custom" label="登录时间"/>
    </el-table>
    <app-pagination
        v-model:page="listParams.pageNum"
        v-model:limit="listParams.pageSize"
        :list-count="listCount"
        :load-list="loadList"
        :disabled="listLoading"
    />
  </app-card>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {queryWxLoginLogList} from '@/api/system';
import {IListParams} from "@/api/types/common";
import {IWxLoginLog} from "@/api/types/user";

const list = ref<IWxLoginLog[]>([]);
const listCount = ref(0);
const listLoading = ref(false);
const listParams = ref<IListParams>({
  pageNum: 1,
  pageSize: 10,
  username: ''
});

// 重置
const reset = () => {
  listParams.value = {
    pageNum: 1,
    pageSize: 10,
  }
  loadList()
}

const selectionItems = ref<IWxLoginLog[]>([]);

onMounted(() => {
  loadList();
});

const loadList = async () => {
  listLoading.value = true;
  const data = await queryWxLoginLogList(listParams.value).finally(() => {
    listLoading.value = false;
  });
  list.value = data.rows;
  listCount.value = data.total;
};

// 选择数据
const handleSelectionChange = (val: IWxLoginLog[]) => {
  selectionItems.value = val;
};
// 排序
const handleSortChange = ({prop, order}: {
  prop: string; order: string;
}) => {
  listParams.value.sortField = prop;
  listParams.value.sortOrder = order
  loadList();
};


</script>

<style lang="scss" scoped>
</style>
